<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>任务下发 - 禾行通</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            background-color: #f8f9fa;
        }
        .task-card {
            background: white;
            border-radius: 15px;
            padding: 1.5rem;
            margin-bottom: 1rem;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        }
        .task-card:hover {
            transform: translateY(-3px);
        }
        .task-form {
            background: white;
            border-radius: 15px;
            padding: 2rem;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        .vehicle-selector {
            border: 2px dashed #dee2e6;
            border-radius: 10px;
            padding: 1rem;
            margin-bottom: 1rem;
            transition: all 0.3s ease;
        }
        .vehicle-selector:hover {
            border-color: #28a745;
            background-color: #f8fff9;
        }
        .vehicle-selector.selected {
            border-color: #28a745;
            background-color: #f8fff9;
            border-style: solid;
        }
        .task-timeline {
            position: relative;
            padding-left: 2rem;
        }
        .task-timeline::before {
            content: '';
            position: absolute;
            left: 0.5rem;
            top: 0;
            bottom: 0;
            width: 2px;
            background: #dee2e6;
        }
        .timeline-item {
            position: relative;
            margin-bottom: 1.5rem;
        }
        .timeline-item::before {
            content: '';
            position: absolute;
            left: -1.5rem;
            top: 0.5rem;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #28a745;
        }
        .status-badge {
            font-size: 0.8rem;
            padding: 0.3rem 0.6rem;
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark" style="background: linear-gradient(45deg, #28a745, #20c997);">
        <div class="container">
            <a class="navbar-brand" href="/dashboard">
                <i class="fas fa-seedling me-2"></i>禾行通
            </a>
            <div class="navbar-nav ms-auto">
                <a class="nav-link" href="/dashboard">首页</a>
                <a class="nav-link" href="/vehicles">设备管理</a>
                <a class="nav-link" href="/fields">田地管理</a>
                <a class="nav-link active" href="/tasks">任务管理</a>
            </div>
        </div>
    </nav>

    <div class="container mt-4">
        <div class="row">
            <!-- 左侧任务创建 -->
            <div class="col-md-8">
                <div class="task-form">
                    <h4><i class="fas fa-plus-circle me-2"></i>创建新任务</h4>
                    <hr>
                    
                    <form id="taskForm">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">任务名称</label>
                                    <input type="text" class="form-control" name="taskName" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">任务类型</label>
                                    <select class="form-select" name="taskType" required>
                                        <option value="">请选择任务类型</option>
                                        <option value="耕地">耕地</option>
                                        <option value="播种">播种</option>
                                        <option value="施肥">施肥</option>
                                        <option value="除草">除草</option>
                                        <option value="收割">收割</option>
                                        <option value="巡检">巡检</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">目标田地</label>
                                    <select class="form-select" name="fieldId" required>
                                        <option value="">请选择田地</option>
                                        <option value="1">东区水稻田 (15.6亩)</option>
                                        <option value="2">西区玉米田 (22.3亩)</option>
                                        <option value="3">南区蔬菜田 (8.9亩)</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">优先级</label>
                                    <select class="form-select" name="priority">
                                        <option value="低">低</option>
                                        <option value="中" selected>中</option>
                                        <option value="高">高</option>
                                        <option value="紧急">紧急</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">计划开始时间</label>
                                    <input type="datetime-local" class="form-control" name="startTime" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">预计完成时间</label>
                                    <input type="datetime-local" class="form-control" name="endTime">
                                </div>
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">任务描述</label>
                            <textarea class="form-control" name="description" rows="3" placeholder="请详细描述任务要求和注意事项..."></textarea>
                        </div>
                        
                        <!-- 设备选择 -->
                        <div class="mb-3">
                            <label class="form-label">选择执行设备</label>
                            <div id="vehicleSelection">
                                <div class="vehicle-selector" data-vehicle-id="1">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div>
                                            <h6 class="mb-1">农机001 - 多功能作业车</h6>
                                            <small class="text-muted">状态: 空闲 | 电量: 85% | 位置: 东区</small>
                                        </div>
                                        <div>
                                            <span class="badge bg-success">可用</span>
                                            <i class="fas fa-check-circle text-success" style="display: none;"></i>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="vehicle-selector" data-vehicle-id="2">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div>
                                            <h6 class="mb-1">农机002 - 播种机</h6>
                                            <small class="text-muted">状态: 空闲 | 电量: 92% | 位置: 西区</small>
                                        </div>
                                        <div>
                                            <span class="badge bg-success">可用</span>
                                            <i class="fas fa-check-circle text-success" style="display: none;"></i>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="vehicle-selector" data-vehicle-id="3">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div>
                                            <h6 class="mb-1">农机003 - 收割机</h6>
                                            <small class="text-muted">状态: 作业中 | 电量: 67% | 位置: 南区</small>
                                        </div>
                                        <div>
                                            <span class="badge bg-warning">忙碌</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="d-flex justify-content-end gap-2">
                            <button type="button" class="btn btn-secondary">保存草稿</button>
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-paper-plane me-2"></i>立即下发
                            </button>
                        </div>
                    </form>
                </div>
            </div>
            
            <!-- 右侧任务列表 -->
            <div class="col-md-4">
                <div class="task-card">
                    <h5><i class="fas fa-list-ul me-2"></i>待执行任务</h5>
                    <hr>
                    
                    <div class="task-timeline">
                        <div class="timeline-item">
                            <div class="d-flex justify-content-between align-items-start">
                                <div>
                                    <h6 class="mb-1">东区水稻田除草</h6>
                                    <small class="text-muted">农机001 | 今天 14:00</small>
                                </div>
                                <span class="badge bg-warning status-badge">待执行</span>
                            </div>
                        </div>
                        
                        <div class="timeline-item">
                            <div class="d-flex justify-content-between align-items-start">
                                <div>
                                    <h6 class="mb-1">西区玉米田施肥</h6>
                                    <small class="text-muted">农机002 | 明天 09:00</small>
                                </div>
                                <span class="badge bg-info status-badge">已安排</span>
                            </div>
                        </div>
                        
                        <div class="timeline-item">
                            <div class="d-flex justify-content-between align-items-start">
                                <div>
                                    <h6 class="mb-1">南区蔬菜田巡检</h6>
                                    <small class="text-muted">农机003 | 进行中</small>
                                </div>
                                <span class="badge bg-primary status-badge">执行中</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="task-card">
                    <h5><i class="fas fa-chart-bar me-2"></i>任务统计</h5>
                    <hr>
                    
                    <div class="row text-center">
                        <div class="col-6">
                            <div class="border-end">
                                <h4 class="text-primary mb-0">12</h4>
                                <small class="text-muted">今日任务</small>
                            </div>
                        </div>
                        <div class="col-6">
                            <h4 class="text-success mb-0">8</h4>
                            <small class="text-muted">已完成</small>
                        </div>
                    </div>
                    
                    <hr>
                    
                    <div class="row text-center">
                        <div class="col-6">
                            <div class="border-end">
                                <h4 class="text-warning mb-0">3</h4>
                                <small class="text-muted">进行中</small>
                            </div>
                        </div>
                        <div class="col-6">
                            <h4 class="text-danger mb-0">1</h4>
                            <small class="text-muted">异常</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 设备选择功能
        document.querySelectorAll('.vehicle-selector').forEach(selector => {
            selector.addEventListener('click', function() {
                // 检查是否可用
                const badge = this.querySelector('.badge');
                if (badge.textContent === '忙碌') {
                    alert('该设备正在忙碌中，无法分配新任务');
                    return;
                }
                
                // 切换选中状态
                document.querySelectorAll('.vehicle-selector').forEach(s => {
                    s.classList.remove('selected');
                    s.querySelector('.fa-check-circle').style.display = 'none';
                });
                
                this.classList.add('selected');
                this.querySelector('.fa-check-circle').style.display = 'inline';
            });
        });
        
        // 任务类型变化时更新可用设备
        document.querySelector('select[name="taskType"]').addEventListener('change', function() {
            const taskType = this.value;
            // 根据任务类型筛选合适的设备
            updateAvailableVehicles(taskType);
        });
        
        function updateAvailableVehicles(taskType) {
            // 这里可以根据任务类型来筛选合适的设备
            console.log('更新可用设备，任务类型:', taskType);
        }
        
        // 表单提交
        document.getElementById('taskForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            // 检查是否选择了设备
            const selectedVehicle = document.querySelector('.vehicle-selector.selected');
            if (!selectedVehicle) {
                alert('请选择执行设备');
                return;
            }
            
            const formData = new FormData(this);
            formData.append('vehicleId', selectedVehicle.dataset.vehicleId);
            
            // 这里应该发送到后端
            console.log('创建任务:', Object.fromEntries(formData));
            
            // 显示成功消息
            alert('任务下发成功！');
            
            // 重置表单
            this.reset();
            document.querySelectorAll('.vehicle-selector').forEach(s => {
                s.classList.remove('selected');
                s.querySelector('.fa-check-circle').style.display = 'none';
            });
        });
        
        // 设置默认时间
        const now = new Date();
        const tomorrow = new Date(now.getTime() + 24 * 60 * 60 * 1000);
        
        document.querySelector('input[name="startTime"]').value = 
            now.toISOString().slice(0, 16);
        document.querySelector('input[name="endTime"]').value = 
            tomorrow.toISOString().slice(0, 16);
    </script>
</body>
</html>